{include file="public/header" /}
<style>
    #main span{
        width: auto;display: block;
    }
</style>
<body class="gray-bg">
{if $dis == 0}
<div style="height: 50px;line-height: 50px;padding-left: 15px;font-size: 16px;">暂无数据</div>
{else /}
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <div class="example-wrap">
            <div class="example">
                <div id="main" style="padding-top:10px;width: auto;height: 500px;text-align:center;z-index: 99999;"></div>
            </div>
        </div>
    </div>
</div>
{/if}
</div>
{include file="public/footer" /}
<!--要有百度地图的api和bmap的生成工具-->
<script src="https://gallery.echartsjs.com/dep/echarts/map/js/china.js"></script>
<script src="https://gallery.echartsjs.com/dep/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=GZSILhN6GDZpDkdku64uWWnGTgTBQmzX"></script>
<script>
    $(document).ready(function(){
        ajaxList();
    });
    function ajaxList() {
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title : {
                text: '商家分布热力图',
                subtext: '',
                left: 'center'
            },
            tooltip : {
                trigger: 'item'
            },
//            legend: {
//                orient: 'vertical',
//                left: 'left',
//                data:['iphone3']
//            },
            visualMap: {
                min: 0,
                max: 500,
                left: 'left',
                top: 'bottom',
                text:['高','低'],           // 文本，默认为数值文本
                calculable : true
            },
            toolbox: {
                show: true,
                orient : 'vertical',
//                left: 'right',
                right: '20',
                top: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            series : [
                {
                    name: '商户',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data:{$data}
                }

            ]
        };
        myChart.setOption(option);
    }
</script>
</body>
</html>